// 做rem适配 font-size:浏览器宽度/80+px
//当浏览器窗口改变大小时更新计算值
function setFont() {
    //获取浏览器的宽度
    let htmlWidth = document.querySelector('html').clientWidth
    //设置fontSize
    if (htmlWidth > 1920) htmlWidth = 1920
    if (htmlWidth<1024) htmlWidth=1024
    let fontSize = htmlWidth/80+'px'
    //获取html fontSize
    document.querySelector('html').style.fontSize=fontSize

}
setFont() //刷新页面马上计算


let myChart1,myChart2
window.onresize = function () {
  setFont() //当浏览器窗口  改变大小时重新计算
  
    myChart2.resize()
    myChart1.resize()
}

let username=[]
let userscore = []
let usermoney = []
//点击添加 

$('button').on('click', function () {
    $('table').append(`
    <tr>
    <td>${$('.name').val()}</td>
    <td>${$('.score').val()}</td>
    <td>${$('.money').val()}</td>
    </tr>
     `)
    username.push($('.name').val())
    userscore.push($('.score').val())
    usermoney.push($('.money').val())
  
    $('.name').val('')
    $('.score').val('')
    $('.money').val('')
     
    $('h4').show()
    zhe()
    zhu()
})
   function zhe() {
    // 1. 初始化
   myChart2 = echarts.init($('.a')[0])
    let option = {
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#0d69cb'
                }
            },
            axisTick: {
                // true意思：图形在刻度中间
                // false意思：图形在刻度之间
                alignWithLabel: true,
                show: true
              },
            data: username
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#0d69cb'
                }
            },
            // 分割线
            splitLine: {
                show: false
            }
        },
        series: [{
            data: userscore,
            type: 'line',
            smooth:true,
            symbolSize:10,
            lineStyle: {
                color: new echarts.graphic.LinearGradient(
                  // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                  1, 1, 0, 0,
                  [
                    { offset: 0, color:'#c0e9ec'  }, // 0 起始颜色
                    { offset: 1, color:'#0061ce' }  // 1 结束颜色
                  ]
                )
               
              
              
            },
            itemStyle: {
                borderWidth: 3,
                borderColor: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#fff' }, // 0 起始颜色
                      { offset: 1, color: '#0061ce' }  // 1 结束颜色
                    ]
                  ),
           
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#fff' }, // 0 起始颜色
                      { offset: 1, color: '#0061ce' }  // 1 结束颜色
                    ]
                  )
            }
        }]
    }
// 2. 使用配置
myChart2.setOption(option)
}
    function zhu() {
        // 1. 初始化
        myChart1 = echarts.init($('.b')[0])
        let option = {
           
           
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#0d69cb'
                        }
                    },
                    data: username,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#0d69cb'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: 40,
                    data: usermoney,
                    // 控制柱子样式
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#fff' }, // 0 起始颜色
                                { offset: 1, color: '#0061ce' }  // 1 结束颜色
                            ]
                        )
          
          
                    }
                }
                
                
                
            ]
        }
        // 2. 使用配置
        myChart1.setOption(option)
    }
    